<template>
  <!-- table -->
  <a-table
    :row-key="(a, b) => b"
    :columns="columns"
    class="mg_t24"
    list-type="picture"
    :pagination="pagination"
    :data-source="dataSource"
    @change="handlePage"
  >
    <template slot="status" slot-scope="text, record">
      <span class="round" :class="['no', 'ok', 'err'][record.status]" />
      {{ ["未完成", "已完成", "异常"][record.status] }}
    </template>
    <template slot="socEndDate" slot-scope="text, record">
      {{ moment(record.socEndDate).format("YYYY-MM-DD") }}
    </template>
    <template slot="fundEndDate" slot-scope="text, record">
      {{ moment(record.fundEndDate).format("YYYY-MM-DD") }}
    </template>
    <template slot="action" slot-scope="text, record">
      <span class="primary" @click="handelEvent(record)">查看反馈</span>
    </template>
  </a-table>
</template>

<script>
const columns = [
  { title: "", dataIndex: "window", scopedSlots: { customRender: "window" } },
  { title: "姓名", dataIndex: "name" },
  { title: "参保城市", dataIndex: "socCityName" },
  { title: "身份证号", dataIndex: "idCard", width: 200 },
  { title: "参保方案", dataIndex: "socProgName" },
  {
    title: "社保停缴时间",
    dataIndex: "socEndDate",
    scopedSlots: { customRender: "socEndDate" }
  },
  {
    title: "住房公积金停缴时间",
    dataIndex: "fundEndDate",
    scopedSlots: { customRender: "fundEndDate" }
  },
  { title: "指派公司", dataIndex: "assignCompanyName" },
  {
    title: "状态",
    dataIndex: "status",
    scopedSlots: { customRender: "status" }
  },
  {
    title: "操作",
    dataIndex: "action",
    scopedSlots: { customRender: "action" }
  }
];

const innerData = [];
export default {
  name: "TableDetail",
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      innerData,
      columns,
      dataSource: [],
      pagination: {
        pageSize: 10,
        total: 0
      }
    };
  },
  watch: {
    options(val) {
      this.pagination.total = val.entityCount;
      this.dataSource = val.entities;
    }
  },

  methods: {
    handelEvent(e) {
      this.$emit("change", { visible: true, e });
    },
    handlePage({ current }) {
      this.$emit("change", { current });
    },
    openDetail(e) {}
  }
};
</script>

<style lang="scss" scoped>
.inner-box {
  display: flex;
  flex-direction: row;
  height: 600px;
  .inner-left {
    width: 300px;
  }
  .inner-right {
    width: calc(100% - 300px);
  }
}
.center {
  text-align: center;
}
.info-left {
  border-right: 1px solid #ccc;
  padding: 20px 56px 30px 0;
  width: 350px;

  .info-item {
    line-height: 34px;
  }
  .name {
    margin-top: 16px;
  }
}
.inner-right-foot {
  padding: 16px;
}
.round {
  height: 8px;
  width: 8px;
  display: inline-block;
  border-radius: 8px;
}
.no {
  background: #fd7d4c;
}
.ok {
  background: #48cb9e;
}
.err {
  background: red;
}
</style>
